<template>
    <div class="fullPage">
        <div class="pageHeader">
            <div class="title">
                <i :class="ui.title.icon"></i> <span>{{ui.title.name}}</span> / <span>{{ui.title.localName}}</span>
            </div>
            <div class="filter"></div>
            <div class="acs">
                <ul class="lstAcs">
                    <li><el-button type = "text" @click="refresh"><i class="fa fa-refresh"></i> refresh</el-button></li>
                    <li><el-button type = "text" @click="showDlg(null)"><i class="fa fa-plus"></i> create new</el-button></li>
                </ul>
            </div>
        </div>
        <div class="pageBody">
            <el-table
                :data="rowDatas"
                style="width: 100%"
                :height="ui.tabHeight"
            >
                <el-table-column
                    v-for = "(col, colIndex) in ui.tabCols"
                    :key="colIndex"
                    :prop="col"
                    :label="col"

                ></el-table-column>
                <el-table-column
                    fixed="right"
                    label="Action"
                    width="80">
                    <template slot-scope="scope">
                        <el-button
                        @click.native.prevent="showDlg(scope.row)"
                        type="text" >
                            <i class="fa fa-edit"></i> edit
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <el-dialog
            :title="ui.title.name + ' / '+ ui.title.localName"
            :visible.sync="dlg.show"
            width="800px"
            >

                <div class="formEditPan">

                    <el-row :gutter="10">
                        <el-col
                            :span="12"
                            v-for="(col , colInd) in ui.tabCols"
                            :key="colInd"
                        >
                            <div
                                class="editRow"
                            >
                                <div class="lab" style="width:130px">{{col}}</div>
                                <div class="edit">
                                    <el-input v-model="dlg.info[col]"></el-input>
                                </div>
                            </div>
                        </el-col>
                    </el-row>

                </div>

            <span slot="footer" class="dialog-footer">
                <el-button @click="dlg.show = false" type = "warning" style="float:left"><i class="fa fa-reply"></i> Cancel</el-button>
                <el-button type="primary" @click="save"><i class="fa fa-save"></i> OK</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
  mounted () {
    var me = this
    try {
      me.init().then(_ => {
        me.refresh()
      })
    } catch (er) {
      console.log(er)
    }
  },
  data () {
    return {
      sqls: {
        path: 'squ/reg/delegation/',
        getItems: 'getItems',
        new: 'new',
        update: 'update'
      },
      ui: {
        title: {
          icon: 'fa fa-flag',
          name: 'Delegation',
          localName: '代表团'
        },
        tabHeight: 200,
        tabCols: [
          'order', 'code', 'name', 'continent', 'countryOrRegion', 'localLongName', 'localName', 'localShortName', 'longName', 'medalCount', 'shortName', 'tVLongName', 'tVShortName'
        ]
      },
      rowDatas: [],
      dlg: {
        show: false,
        info: {}
      }
    }
  },
  methods: {
    init () {
      var me = this
      return new Promise((success, faild) => {
        try {
          me.$nextTick().then(_ => {
            var h = (document.getElementsByClassName('pageBody')[0]).offsetHeight
            me.ui.tabHeight = h
            success()
          })
        } catch (er) {
          console.log(er)
          success()
        }
      })
    },
    refresh () {
      var me = this
      try {
        me.dlg.show = false
        var key = me.sqls.path + me.sqls.getItems
        var ps = {}
        me.sys.query(key, ps).then(res => {
          me.rowDatas = res
        })
      } catch (er) {
        console.log(er)
      }
    },
    showDlg (infoData) {
      var me = this
      try {
        me.dlg.info = me.getEditInfo(infoData)
        me.dlg.show = true
      } catch (er) {
        console.log(er)
      }
    },
    getEditInfo (infoData) {
      var me = this
      var res = {}
      try {
        res = infoData && infoData != null ? infoData : {
          delegationId: 0,
          code: '',
          continent: '',
          countryOrRegion: '',
          localLongName: '',
          localName: '',
          localShortName: '',
          longName: '',
          medalCount: '',
          name: '',
          order: 0,
          shortName: '',
          tVLongName: '',
          tVShortName: ''
        }
      } catch (er) {
        console.log(er)
      }
      return res
    },
    save () {
      var me = this
      try {
        var keyNew = me.sqls.path + me.sqls.new
        var keyUpdate = me.sqls.path + me.sqls.update
        var isEditFlag = me.dlg.info && me.dlg.info.delegationId && me.dlg.info.delegationId > 0
        var key = isEditFlag ? keyUpdate : keyNew
        var ps = me.dlg.info
        ps.order = parseInt(ps.order.toString())
        me.sys.query(key, ps).then(res => {
          if (res && res.rowcount && res.rowcount > 0) {
            me.refresh()
          } else {
            me.$message.error('save action faild!')
          };
        })
      } catch (er) {
        console.log(er)
      }
    }
  }

}
</script>

<style lang="less" scoped>
    @import url('../module.less');

</style>
